<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/全选案例.css">
</head>
<body>
    <div class="box">
       <ol class="tit tit1">
            <input type="text" class="all">
            <li class="all">SelectALL</li>
            <li>Name</li>
            <li>Email</li>
            <li>Phone</li>
            <li>Mobile</li>
       </ol>
       <div class="cons"></div>
        
    <script>
        var data=[
                    {
                        select:'+',
                        name:'Gary Coleman',
                        email:'gary.coleman21@example.com',
                        phone:'(398)-332-5385',
                        mobile:'(888)-677-3719'
                    },
                    {
                        select:'+',
                        name:'Gary Coleman',
                        email:'gary.coleman21@example.com',
                        phone:'(398)-332-5385',
                        mobile:'(888)-677-3719'
                    },
                    {
                        select:'+',
                        name:'Gary Coleman',
                        email:'gary.coleman21@example.com',
                        phone:'(398)-332-5385',
                        mobile:'(888)-677-3719'
                    },
                    {
                        select:'+',
                        name:'Gary Coleman',
                        email:'gary.coleman21@example.com',
                        phone:'(398)-332-5385',
                        mobile:'(888)-677-3719'
                    }
             ]
                    

        var cons=document.querySelector('.cons')
        cons.innerHTML=data.map(function(item){
            return `<ul class="tit con">
                    <input type="text">
                    <li>${item.select}</li>
                    <li>${item.name}</li>
                    <li>${item.email}</li>
                    <li>${item.phone}</li>
                    <li>${item.mobile}</li>
                    </ul>`
        }).join('')
        var uls=[...cons.children]
        uls.forEach(function(ul,i){
            ul.onclick=function(item){
                uls[i].classList.toggle('active')
                var val=uls[i].querySelector('input').innerHTML
                 val='√'
            }
        })
        var alls=document.querySelectorAll('.all')
        var all=[...alls]
        all.forEach(function(n){
            n.onclick=function(){
                uls.forEach(function(item){
                    item.classList.add('active')
                    item.querySelector('input').value='√'
                })
            }
        })

    </script>
</body>
</html>